<!--prettier-ignore-->
<%= render "layouts/documentation/component_header",
  title: "Alert",
  description: "Displays a callout for user attention" %>

<% content_for :preview, flush: true do %>
  <div class="w-full">
    <%= render_code_preview('alert') %>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert/preview", :erb) %>
<% end %>

<%= render_preview %>

<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
<%= code_sample(language: "sh") do %>
rails generate shadcn-ui alert
<% end %>

<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>

<%= code_partial("alert/usage", :erb) %>

<%= render_usage("alert") %>

<% content_for :examples, flush: true do %>
  <div class="w-full flex justify-center">
    <div role="alert" class="border-success/50 text-success dark:border-success [&amp;>svg]:text-success relative w-full rounded-lg border p-4 [&amp;:has(svg)]:pl-11 [&amp;>svg+div]:translate-y-[-3px] [&amp;>svg]:absolute [&amp;>svg]:left-4 [&amp;>svg]:top-4">
      <svg class="h-4 w-4 text-success" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path>
      </svg>
      <h5 class="mb-1 font-medium leading-none tracking-tight">Success</h5>
      <div class="text-sm [&amp;_p]:leading-relaxed">This variant is :success</div>
    </div>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert/success", :erb) %>
<% end %>
<%= render_example %>

<% content_for :examples, flush: true do %>
  <div class="w-full flex justify-center">
    <div role="alert" class="border-info/50 text-info dark:border-info [&amp;>svg]:text-info relative w-full rounded-lg border p-4 [&amp;:has(svg)]:pl-11 [&amp;>svg+div]:translate-y-[-3px] [&amp;>svg]:absolute [&amp;>svg]:left-4 [&amp;>svg]:top-4">
      <svg class="h-4 w-4 text-info" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
      </svg>
      <h5 class="mb-1 font-medium leading-none tracking-tight">Info</h5>
      <div class="text-sm [&amp;_p]:leading-relaxed">This variant is :info</div>
    </div>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert/info", :erb) %>
<% end %>

<%= render_example %>

<% content_for :examples, flush: true do %>
  <div class="w-full flex justify-center">
    <div role="alert" class="border-attention/50 text-attention dark:border-attention [&amp;>svg]:text-attention relative w-full rounded-lg border p-4 [&amp;:has(svg)]:pl-11 [&amp;>svg+div]:translate-y-[-3px] [&amp;>svg]:absolute [&amp;>svg]:left-4 [&amp;>svg]:top-4">
      <svg class="h-4 w-4 text-attention" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
      </svg>
      <h5 class="mb-1 font-medium leading-none tracking-tight">Attention</h5>
      <div class="text-sm [&amp;_p]:leading-relaxed">This variant is :attention</div>
    </div>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert/attention", :erb) %>
<% end %>

<%= render_example %>

<% content_for :examples, flush: true do %>
  <div class="w-full flex justify-center">
    <%= render "examples/components/alert/code/destructive" %>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert/destructive", :erb) %>
<% end %>

<%= render_example %>

<% content_for :examples, flush: true do %>
  <div class="w-full flex justify-center">
    <%= render "examples/components/alert/code/no_icon" %>
  </div>
<% end %>

<% content_for :code, flush: true do %>
  <%= code_partial("alert/no_icon", :erb) %>
<% end %>

<%= render_example %>
